<!--
* @Author: white_queen
* @Date: 2024-07-21 10:58:25
* @LastEditors: white_queen
* @LastEditTime: 2024-07-21 13:53:59
* @FilePath: /components/productList/productList.vue
* @Description: 商品列表组件,用于 浏览记录页面 和 商品收藏页面
-->
<template>
	<view>
		<u-list @scrolltolower="scrolltolower" :enableFlex="true">
			<u-list-item>
				<view class="list">
					<view class="item" v-for="(item, index) in list" :key="index">
						<image class="img" :src="item.goods_info.image" mode="aspectFill"></image>
						<text class="title">{{ item.goods_info.name }}</text>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
export default {
	name: 'productList',
	props: {
		list: {
			type: Array,
			required: true
		}
	},
	data() {
		return {};
	},
	methods: {
		scrolltolower() {
			this.$emit('scrolltolower');
		}
	}
};
</script>

<style lang="scss" scoped>
.list {
	width: 750rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	.item {
		width: 330rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		margin: 20rpx 0;
		overflow: hidden;
		.img {
			width: 330rpx;
			height: 330rpx;
		}
		.title {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 20rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	}
}
</style>
